var course  = {
  index: -1,
  timer: null,
  mark: false,
  prev: 'btn-1',
  sitcomList: [],
  init: function (typeId) {
    if (!typeId) return
    this.getData(typeId)
    this.render()
  },  
  getData: function (typeId) {
    var series = getVodListByTypeId({TYPEID: typeId})
    if (series.data.length === 0) return
    page.data.course = series.data
  },
  render: function () {
    var course = page.data.course
    var html = ''
    for (var i = 0, l = course.length; i < l; i++) {
      var data = course[i]
      var pic0 = data.picture[0].picPath8
      var pic1 = data.picture[0].picPath9
      html += '<div class="container" id="course-' + i + '">'
      html += '<img src="' + pic0 + '" style="z-index: 2;"/>'
      html += '<img src="' + pic1 + '" style="z-index: 0;"/>'
      html += '</div>'
    }
    $('#course').html(html)
    this.index = 0
    this.toggleItem()
  },
  toggleItem: function () {
    var _this = this
    this.mark = true
    $('#course .container').removeClass('active')
    $('#course .container').eq(this.index).addClass('active')
    $('#course img').show()
    $('#btn').html('')
    setTimeout(function () {
      _this.mark = false
      $('.active img:eq(0)').fadeOut()
      _this.renderBtn()
    }, 1500) 
  },
  renderBtn: function () {
    var course = page.data.course
    var html = ''
    if (this.index === 0) {
      html += '<div class="item btn btn-1 border-radius" id="btn-1"></div>'
    } else if (this.index === (course.length - 1)) {
      html += '<div class="item btn btn-0 border-radius" id="btn-0"></div>'
      html += '<div class="item item-1 btn btn-2 border-radius" id="btn-2"></div>'
    } else {
      html += '<div class="item btn btn-0 border-radius" id="btn-0"></div>'
      html += '<div class="item item-1 btn btn-1 border-radius" id="btn-1"></div>'
    }
    $('#btn').html(html)
    var dom = document.getElementById(this.prev)
    dom && utils.toggleClass(dom)
  }
}